<div
  bsModal
  #createOrEditModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="createOrEditModal"
  aria-hidden="true"
  [config]="{ backdrop: 'static' }"
>
  <div class="modal-dialog modal-xxl">
    <div class="modal-content">
      <form #editForm="ngForm" novalidate autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title"><span>工装履历</span></h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!--
            <ul class="nav nav-tabs  m-tabs-line" role="tablist">
              <li class="nav-item m-tabs__item" *ngFor="let operationName of operationNames; let i = index">
                <a
                  class="nav-link m-tabs__link"
                  data-toggle="tab"
                  href="javascript:;"
                  role="tab"
                  [ngClass]="{ active: tab === i + 1 }"
                  (click)="tabChange(i + 1)"
                  >{{ operationName }}</a
                >
              </li>
            </ul>
          -->
          <form class="horizontal-form" autocomplete="off">
            <div class="m-form m-form--label-align-right">
              <div class="row align-items-center m--margin-bottom-10">
                <div class="col-xl-12">
                  <div class="form-group m-form__group align-items-center">
                    <div class="input-group">
                      <input
                        [(ngModel)]="filterText"
                        name="filterText"
                        autofocus
                        class="form-control m-input"
                        [placeholder]="l('SearchWithThreeDot')"
                        type="text"
                      />
                      <span class="input-group-btn">
                        <button (click)="getToolingLogs()" class="btn btn-primary" type="submit">
                          <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                <div class="col-sm-12 text-right">
                  <button class="btn btn-metal" (click)="getLogs()">
                    <i class="fa fa-refresh"></i> {{ l('Refresh') }}
                  </button>
                </div>
              </div>
              <div class="row margin-bottom-10"></div>
            </div>
          </form>

          <div class="row align-items-center">
            <!-- <Primeng-TurboTable-Start> -->
            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
              <p-table
                #logDataTable
                (onLazyLoad)="getToolingLogs($event)"
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                [paginator]="false"
                [lazy]="true"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
              >
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width: 120px">工装名称</th>
                    <th style="width: 120px">工装图号</th>
                    <th style="width: 120px">操作类型</th>
                    <th style="width: 120px">出库信息</th>
                    <th style="width: 150px" pSortableColumn="outDate">
                      出库时间
                      <p-sortIcon field="outDate"></p-sortIcon>
                    </th>
                    <th style="width: 120px">出库备注</th>
                    <th style="width: 120px">入库信息</th>
                    <th style="width: 150px" pSortableColumn="backDate">
                      入库时间
                      <p-sortIcon field="backDate"></p-sortIcon>
                    </th>
                    <th style="width: 120px">入库备注</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit">
                  <tr>
                    <td style="width: 120px"><span class="ui-column-title"> 工装名称</span> {{ record.title }}</td>
                    <td style="width: 120px"><span class="ui-column-title"> 工装图号</span> {{ record.subTitle }}</td>
                    <td style="width: 120px">
                      <span class="ui-column-title"> 操作类型</span> {{ record.operationName }}
                    </td>
                    <td style="width: 120px">
                      <span class="ui-column-title"> 出库信息</span> {{ record.outStockInfo }}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 出库时间</span> {{ record.outDate | momentFormat: 'YYYY-MM-DD' }}
                    </td>
                    <td style="width: 120px"><span class="ui-column-title"> 出库备注</span> {{ record.outRemark }}</td>
                    <td style="width: 120px">
                      <span class="ui-column-title"> 入库信息</span> {{ record.backStockInfo }}
                    </td>
                    <td style="width: 150px">
                      <span class="ui-column-title"> 入库时间</span> {{ record.backDate | momentFormat: 'YYYY-MM-DD' }}
                    </td>
                    <td style="width: 120px"><span class="ui-column-title"> 入库备注</span> {{ record.backRemark }}</td>
                  </tr>
                </ng-template>
              </p-table>
              <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">{{ l('NoData') }}</div>
              <div class="primeng-paging-container">
                <p-paginator
                  rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
                  #logPaginator
                  (onPageChange)="getToolingLogs($event)"
                  [totalRecords]="primengTableHelper.totalRecordsCount"
                  [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                >
                </p-paginator>
                <span class="total-records-count"> 共计：{{ primengTableHelper.totalRecordsCount }} </span>
              </div>
            </div>
            <!-- <Primeng-TurboTable-End> -->
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
